﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ArcGIS demo</title>
    <link rel="stylesheet"
          href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="viewDiv">
        <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="画线">
            <span class="esri-icon-polyline"></span>
        </div>
        <div id="area-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
            <span class="esri-icon-polygon"></span>
        </div>
        <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="画点">
            <span class="esri-icon-radio-checked"></span>
        </div>
        <div id="circle-button" class="esri-widget esri-widget--button esri-interactive" title="画圆">
            <span class="esri-icon-radio-unchecked"></span>
        </div>
        <div id="rectangle-button" class="esri-widget esri-widget--button esri-interactive" title="画矩形">
            <span class="esri-icon-checkbox-unchecked"></span>
        </div>
    </div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/views/2d/draw/Draw",
            "esri/Graphic",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",
            "esri/geometry/Point",
            "esri/geometry/Circle",
            "dojo/domReady!",
            "esri/tasks/GeometryService",
            "esri/config"
        ], function (
            Map, MapView,
            Draw, Graphic,
            Polyline, Polygon, Point, Circle, GeometryService, esriConfig
        ) {
            var map = new Map({
                basemap: "dark-gray"
            });

            //二维视图
            var view = new MapView({
                map: map,
                zoom: 5,
                center: [90, 45],
                container: "viewDiv"
            });
            view.ui.add("line-button", "top-left");//添加绘制线按钮，自定义UI
            view.ui.add("area-button", "top-left");//添加绘制面按钮，自定义UI
            view.ui.add("point-button", "top-left");//添加绘制点按钮，自定义UI
            view.ui.add("circle-button", "top-left");//添加绘制圆按钮，自定义UI
            view.ui.add("rectangle-button", "top-left");//添加绘制矩形按钮，自定义UI
            // view.ui.remove("attribution");//移除底部ESRI logo

            view.when(function () {
                var draw = new Draw({
                    view: view
                });
                //绑定线按钮绘制事件
                var drawLineButton = document.getElementById("line-button");
                drawLineButton.onclick = function () {
                    view.graphics.removeAll();//清楚之前的绘制
                    enableCreateLine(draw, view);
                };
                //绑定面按钮绘制事件
                var drawAreaButton = document.getElementById("area-button");
                drawAreaButton.onclick = function () {
                    view.graphics.removeAll();//清楚之前的绘制
                    enableCreateArea(draw, view);
                };
                //绑定点按钮绘制事件
                var drawPointButton = document.getElementById("point-button");
                drawPointButton.onclick = function () {
                    enableCreatePoint(draw, view);
                };
                //绑定圆按钮绘制事件
                var drawCircleButton = document.getElementById("circle-button");
                drawCircleButton.onclick = function () {
                    enableCreateCircle(draw, view);
                };
                //绑定矩形按钮绘制事件
                var drawRectangleButton = document.getElementById("rectangle-button");
                drawRectangleButton.onclick = function () {
                    enableCreateRectangle(draw, view);
                };
            });
            //开始监听画线
            function enableCreateLine(draw, view) {
                var action = draw.create("polyline", {
                    mode: "click"
                });
                // 获取焦点
                view.focus();

                // 顶点添加事件
                action.on("vertex-add", createPolyline);


                //顶点移除事件
                action.on("vertex-remove", createPolyline);


                // 鼠标移动事件
                action.on("cursor-update", createPolyline);


                // 绘制完成事件
                action.on("draw-complete", createPolyline);


            }
            //开始监听画面
            function enableCreateArea(draw, view) {
                var action = draw.create("polygon", {
                    mode: "click"//点击方式加点
                });
                // 获取焦点
                view.focus();

                // 顶点添加事件
                action.on("vertex-add", createPolygon);


                //顶点移除事件
                action.on("vertex-remove", createPolygon);


                // 鼠标移动事件
                action.on("cursor-update", createPolygon);


                // 绘制完成事件
                action.on("draw-complete", createPolygon);


            }
            //开始监听画点
            function enableCreatePoint(draw, view) {
                var action = draw.create("point", {
                    mode: "click"//点击方式加点
                });
                // 获取焦点
                view.focus();

                // 顶点添加事件
                action.on("vertex-add", createPoint);


                //顶点移除事件
                action.on("vertex-remove", createPoint);


                // 绘制完成事件
                action.on("draw-complete", createPoint);


            }
            //开始监听画圆
            function enableCreateCircle(draw, view) {
                var action = draw.create("circle", {
                    mode: "click"//点击方式加点
                });
                // 获取焦点
                view.focus();
                //顶点移除事件
                action.on("vertex-remove", createCircle);
                // 鼠标移动事件
                action.on("cursor-update", createCircle);
                // 绘制完成事件
                action.on("draw-complete", createCircle);
            }
            //开始监听画矩形
            function enableCreateRectangle(draw, view) {
                var action = draw.create("rectangle", {
                    mode: "click"//点击方式加点
                });
                // 获取焦点
                view.focus();
                console.log("绘制中.....");

                //顶点移除事件
                action.on("vertex-remove", createRectangle);
                // 鼠标移动事件
                action.on("cursor-update", createRectangle);
                // 绘制完成事件
                action.on("draw-complete", createRectangle);

            }


            //根据点坐标生成新的线
            function createPolyline(event) {
                //获取所有顶点
                var vertices = event.vertices;
                //清除之前绘制
                view.graphics.removeAll();
                // 生成绘制的图形
                var graphic = new Graphic({
                    geometry: new Polyline({
                        paths: vertices,
                        spatialReference: view.spatialReference
                    }),
                    symbol: {
                        type: "simple-line", // autocasts as new SimpleFillSymbol
                        color: [4, 90, 141],
                        width: 4,
                        cap: "round",
                        join: "round"
                    }
                });
                // 将绘制的图形添加到view
                view.graphics.add(graphic);
            };
            //根据点坐标生成新的面
            function createPolygon(event) {
                //获取所有顶点
                var vertices = event.vertices;
                //清除之前绘制
                view.graphics.removeAll();

                // 生成绘制的图形
                var graphic = new Graphic({
                    geometry: new Polygon({
                        hasZ: false,
                        hasM: false,
                        rings: [vertices],
                        spatialReference: view.spatialReference
                    }),
                    symbol: {
                        type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                        color: [51, 51, 204, 0.9],
                        style: "solid",
                        outline: {  // autocasts as new SimpleLineSymbol()
                            color: "red",
                            width: 1
                        }
                    }
                });
                // 将绘制的图形添加到view
                view.graphics.add(graphic);
            }
            //根据点坐标生成新的点
            function createPoint(event) {
                //获取所有顶点
                var coordinates = event.coordinates;

                //生成绘制的图形
                var graphic = new Graphic({
                    geometry: new Point({
                        hasZ: false,
                        hasM: false,
                        x: coordinates[0],
                        y: coordinates[1],
                        spatialReference: view.spatialReference
                    }),
                    symbol: {
                        type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                        style: "square",
                        color: "blue",
                        size: "8px",  // pixels
                        outline: {  // autocasts as new SimpleLineSymbol()
                            color: [255, 255, 0],
                            width: 3  // points
                        }
                    }
                });
                // 将绘制的图形添加到view
                view.graphics.add(graphic);
            }
            //根据点坐标生成新的圆
            function createCircle(event) {
                //获取所有顶点
                var vertices = event.vertices;
                //少于一个点无法展示圆
                if (vertices.length < 2) {
                    return
                }
                //清除之前绘制
                view.graphics.removeAll();
                console.log("圆形数据：\r\n" + vertices[0] + "\r\n" + vertices[1] + "\r\n" + vertices[0][0] + "---" + vertices[0][1] + "\r\n" + vertices[1][0] + "---" + vertices[1][1]);

                //生成绘制的图形,两点画圆
                var center = new Point({
                    hasZ: false,
                    hasM: false,
                    x: vertices[0][0],
                    y: vertices[0][1],
                    spatialReference: view.spatialReference
                });
                var dis = center.distance(new Point({
                    hasZ: false,
                    hasM: false,
                    x: vertices[1][0],
                    y: vertices[1][1],
                    spatialReference: view.spatialReference
                }));
                var graphic = new Graphic({
                    geometry: new Circle({
                        hasZ: false,
                        hasM: false,
                        center: center,
                        radius: dis,
                        spatialReference: view.spatialReference
                    }),
                    symbol: {
                        type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                        color: [51, 51, 204, 0.9],
                        style: "solid",
                        outline: {  // autocasts as new SimpleLineSymbol()
                            color: "white",
                            width: 1
                        }
                    }
                });
                // 将绘制的图形添加到view
                view.graphics.add(graphic);
            }
            //根据点坐标生成新的矩形
            function createRectangle(event) {
                //获取所有顶点
                var vertices = event.vertices;

                //两点画矩形
                if (vertices.length < 2) {
                    return
                }

                

                var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
                console.log("矩形数据：\r\n" + vertices[0] + "\r\n" + vertices[1] + "\r\n" + vertices[0][0] + "---" + vertices[0][1] + "\r\n" + vertices[1][0] + "---" + vertices[1][1]);
                //console.log("经纬度数据：\r\n" + convertCoordinates(vertices[0][0]) + "\r\n" + convertCoordinates(vertices[1][1]));
                //清除之前绘制
                view.graphics.removeAll();

                // 生成绘制的图形
                var graphic = new Graphic({
                    geometry: new Polygon({
                        hasZ: false,
                        hasM: false,
                        rings: [rings],
                        spatialReference: view.spatialReference
                    }),
                    symbol: {
                        type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                        color: [51, 51, 204, 0.9],
                        style: "solid",
                        outline: {  // autocasts as new SimpleLineSymbol()
                            color: "white",
                            width: 1
                        }
                    }
                });
                // 将绘制的图形添加到view
                view.graphics.add(graphic);
            }


            
        })
    </script>
    <script>
        function convertCoordinates(inputCoordinates) {
            require([
                "esri/Map",
                "esri/views/MapView",
                "esri/tasks/GeometryService",
                "esri/config"
            ], function (Map, MapView, GeometryService, esriConfig) {

                // 创建 GeometryService 实例
                var geometryService = new GeometryService();

                var inputGeometry = {
                    x: inputCoordinates[0],
                    y: inputCoordinates[1],
                    spatialReference: {
                        wkid: 4326 // 输入坐标的空间参考系，这里使用 WGS 1984
                    }
                };

                var outputSpatialReference = {
                    wkid: 4490 // 输出坐标的空间参考系，这里使用 Web Mercator
                };

                var params = {
                    geometries: [inputGeometry],
                    outSpatialReference: outputSpatialReference
                };

                geometryService.project(params).then(function (result) {
                    var outputGeometry = result[0];
                    console.log("转换后的坐标: ", outputGeometry.x, outputGeometry.y);
                });

            });
        }
            var sss = new Array(9876887.046897203, 6509414.00675232);
            console.log("sss" + convertCoordinates(sss));
    </script>
</body>

</html>